<template>
	<el-menu router default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
		active-text-color="#ffd04b" :collapse='isCollapse' :default-openeds="['10']">
		<!--  -->
		<template v-for="(item,index) in menu">
			<el-submenu :index="index  + '1'">
				<template slot="title">
					<i :class="'el-icon-'+item.icon"></i>
					<span>{{item.name}}</span>
				</template>
				<el-menu-item-group>
					<el-menu-item v-for="(next,key) in item.children" :index="next.path">{{next.name}}</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</template>
	</el-menu>
</template>

<script>
	import { Menu } from '@/api/';
	import { mapState } from 'vuex';

	export default {
		data() {
			return {
				menu: [],
			}
		},
		created() {
			this.loadMean();
		},
		methods: {
			async loadMean() {
				//获取角色id
				let id = sessionStorage.role;
				let { status, data } = await Menu.config({ id });
				if (status) {
					this.menu = data;
				}
			},
			
		},
		computed: {
			...mapState('menu', ['isCollapse']),
			// isCollapse() {
			// 	return this.$store.state.menu.isCollapse;
			// }
		}
	}
</script>

<style lang="less">
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 200px; //宽度自己掌握
		height: 100%;
	}

	.el-menu-vertical-demo.el-menu {
		border: none;
	}
</style>
